<script setup lang="ts">
import { dayjs } from 'element-plus';
import { ElScrollbar as ElScrollbarType } from 'element-plus';
import {nextTick, ref} from "vue";
import {sleep} from "openai/core";

const items = ref([])
for(let i = 0;i<100;i++){
  items.value.push("index"+i)
}
console.log(items.value)
const handleClick = () => {
  items.value.push(dayjs().format('YYYY-MM-DD HH:mm:ss SSS'));
  nextTick(() => {
    if (innerRef.value!.clientHeight > 200) {
      scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
    }

  })
}
nextTick(() => {
  document.getElementById(items.value.length-1)
      .scrollIntoView({
        alignToTop:false,
        behavior:"smooth",
      })
})

function goToButton(){
  //nextTick 等界面的dom元素都渲染完成后再执行
  nextTick(()=>{
    document.getElementById((items.value.length-1))
        .scrollIntoView({
          alignToTop:false,
          behavior:"smooth",
        })
  })
}

function addAndScroll(){
  items.value.push("index"+(items.value.length))
  goToButton()
}

</script>
<template>
<!--  <a href="#li50">跳到50</a>-->
  <div class="w-full h-full flex flex-col">
    <el-scrollbar class="">
      <ul class="ul ">
        <li v-for="(item, index) in items" :id="index">
          {{ item}}
        </li>
      </ul>
    </el-scrollbar>
    <button class="h-30 w-30 hover:bg-cyan" @click="addAndScroll">增加元素</button>
  </div>

</template>

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: #ecf5ff;
  color: #409eff;
}
</style>
